<form id="edit-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Service_name')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-service_name" data-rule="required" class="form-control" name="row[service_name]" type="text" value="{$row.service_name|htmlentities}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">繁体{:__('Service_name')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-service_name_hk" data-rule="required" class="form-control" name="row[service_name_hk]" type="text" value="{$row.service_name_hk|htmlentities}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">服务费用</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-service_price" data-rule="required" class="form-control" name="row[price]" type="text" value="{$row.price|htmlentities}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">预约人数</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-service_people_num" data-rule="required" class="form-control" name="row[people_num]" type="number" value="{$row.people_num|htmlentities}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">排序</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-service_sort" data-rule="required" class="form-control" name="row[sort]" type="number" value="{$row.sort|htmlentities}">
            <span style="color:rgb(135, 144, 152)">注意：数字越大越靠前</span>
        </div>
    </div>

    <div class="form-group pidList">
        <label class="control-label col-xs-12 col-sm-2">{:__('绑定问卷')}:</label>
        <div class="col-xs-12 col-sm-4">
            <select name="row[question_answer_id]" id="question_answer_id" data-rule="" class="selectpicker">
                <option value="">请选择问卷</option>
                {foreach $questionAnswerLists as $key=>$vo}
                <option value="{$key}" {if $row["question_answer_id"] == $key}selected{/if} >{$vo}</option>
                {/foreach}
            </select>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('客服二维码')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="input-group">
                <input id="c-customer_qrcode_img" data-rule="required" class="form-control" size="50" name="row[customer_qrcode_img]" type="textarea" value="{$row.customer_qrcode_img|htmlentities}">
                <div class="input-group-addon no-border no-padding">
                    <span><button type="button" id="faupload-customer_qrcode_img" class="btn btn-danger faupload" data-input-id="c-customer_qrcode_img" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp,image/webp" data-multiple="false" data-preview-id="p-customer_qrcode_img"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                    <span><button type="button" id="fachoose-customer_qrcode_img" class="btn btn-primary fachoose" data-input-id="c-customer_qrcode_img" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                </div>
                <span class="msg-box n-right" for="c-customer_qrcode_img"></span>
            </div>
            <ul class="row list-inline faupload-preview" id="p-customer_qrcode_img"></ul>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('项目logo')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="input-group">
                <input id="c-service_logo" data-rule="required" class="form-control" size="50" name="row[service_logo]" type="textarea" value="{$row.service_logo|htmlentities}">
                <div class="input-group-addon no-border no-padding">
                    <span><button type="button" id="faupload-service_logo" class="btn btn-danger faupload" data-input-id="c-service_logo" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp,image/webp" data-multiple="false" data-preview-id="p-service_logo"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                    <span><button type="button" id="fachoose-service_logo" class="btn btn-primary fachoose" data-input-id="c-service_logo" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                </div>
                <span class="msg-box n-right" for="c-service_logo"></span>
            </div>
            <ul class="row list-inline faupload-preview" id="p-service_logo"></ul>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Service_banner')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="input-group">
                <input id="c-service_banner" data-rule="required" class="form-control" size="50" name="row[service_banner]" type="textarea" value="{$row.service_banner|htmlentities}">
                <div class="input-group-addon no-border no-padding">
                    <span><button type="button" id="faupload-service_banner" class="btn btn-danger faupload" data-input-id="c-service_banner" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp,image/webp" data-multiple="false" data-preview-id="p-service_banner"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                    <span><button type="button" id="fachoose-service_banner" class="btn btn-primary fachoose" data-input-id="c-service_banner" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                </div>
                <span class="msg-box n-right" for="c-service_banner"></span>
            </div>
            <ul class="row list-inline faupload-preview" id="p-service_banner"></ul>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('项目特点')}:</label>
        <div class="col-xs-12 col-sm-8">
            
            <dl class="fieldlist" data-name="row[service_characteristic]">
                <dd>
                    <ins>{:__('标题')}</ins>
                    <ins>{:__('内容')}</ins>
                </dd>
                <dd><a href="javascript:;" class="btn btn-sm btn-success btn-append"><i class="fa fa-plus"></i> {:__('Append')}</a></dd>
                <textarea name="row[service_characteristic]" class="form-control hide" cols="30" rows="5">{$row.service_characteristic|htmlentities}</textarea>
            </dl>
            <span style="color:rgb(135, 144, 152)">注意：日期格式例如 2024-01-01</span>

        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Service_tags')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-service_tags" data-rule="required" class="form-control" data-role="tagsinput" name="row[service_tags]" type="text" value="{$row.service_tags|htmlentities}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">繁体{:__('Service_tags')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-service_tags_hk" data-rule="required" class="form-control" data-role="tagsinput" name="row[service_tags_hk]" type="text" value="{$row.service_tags_hk|htmlentities}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Service_score')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-service_score" data-rule="required" class="form-control" name="row[service_score]" type="number" value="{$row.service_score|htmlentities}">
        </div>
    </div>   
    
    <div>
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">{:__('项目详情')}:</label>
            <div class="col-xs-12 col-sm-8" id="editor-container">
                {foreach name="content" id="item"}
                <div class="editor-row">
                    <input id="c-service_title" data-rule="required" class="form-control" name="row[content][title][]" type="text" value="{$item.title|htmlentities}" placeholder="请输入标题">
                    <textarea class="form-control editor" rows="5" name="row[content][value][]" cols="50">{$item.value|htmlentities}</textarea>
                    <button type="button" class="btn btn-danger remove-editor">删除</button>
                    <hr>
                </div>
                {/foreach}
            </div>
        </div>
        <button type="button" id="add-editor" class="btn btn-primary" style="margin-left: 17%;">追加详情</button>
    </div>

    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-primary btn-embossed disabled">{:__('OK')}</button>
        </div>
    </div>
    
</form>

<script>
    $(document).ready(function() {
        // 点击添加按钮
        $('#add-editor').click(function() {
            var newEditor = `
                    <div class="editor-row">
                        <input id="c-service_title" data-rule="required" class="form-control" name="row[content][title][]" type="text" value="" placeholder="请输入标题">
                        <textarea class="form-control editor" rows="5" name="row[content][value][]" cols="50"></textarea>
                        <button type="button" class="btn btn-danger remove-editor">删除</button>
                        <hr>
                    </div>`;
            $('#editor-container').append(newEditor);
            // 初始化新的富文本编辑器 
            $('.editor').last().summernote({
                height: 100,
                lang: 'zh-CN'
            });
        });

        // 删除按钮事件
        $(document).on('click', '.remove-editor', function() {
            $(this).closest('.editor-row').remove();
        });
    });
</script>
